@normal-font-size: 0.32rem;
@small-font-size: 0.26rem;
@app-background: #F5F5F9;
@normal-space: 0.08rem;
@double-space: 0.16rem;
@half: 50%;
@font-gray: #999;
@flex: flex;
@box-shadow: 0.01rem 0.01rem 0.05rem #999;

.f-normal-font-size {font-size: @normal-font-size;}
.f-small-font-size {font-size: @small-font-size;}
.f-app-background {background: @app-background;}
.f-separate {height: 0.01rem; width: 100%; background: #eee;}
.f-app-height {height: 100%;}
.f-white() {background: white;}
.f-black() {background: black;}
.f-app-center() {
  margin: auto 0;
  text-align: center;
  justify-content: center;
  align-items: center;
}

/** margin */
.f-margin(@x: @normal-space) {margin: @x;}
.f-margin-top(@x: @normal-space) {margin-top: @x;}
.f-margin-left(@x: @normal-space) {margin-left: @x;}
.f-margin-bottom(@x: @normal-space) {margin-bottom: @x;}
.f-margin-right(@x: @normal-space) {margin-right: @x;}
.f-margin-left-top(@x: @normal-space, @y: @normal-space) {margin-left: @x; margin-top: @y;}
.f-margin-right-bottom(@x: @normal-space, @y: @normal-space) {margin-right: @x; margin-bottom: @y;}

/** padding */
.f-padding(@x: @normal-space) {padding: @x;}
.f-padding-top(@x: @normal-space) {padding-top: @x;}
.f-padding-left(@x: @normal-space) {padding-left: @x;}
.f-padding-bottom(@x: @normal-space) {padding-bottom: @x;}
.f-padding-right(@x: @normal-space) {padding-right: @x;}
.f-padding-left-top(@x: @normal-space, @y: @normal-space) {padding-left: @x; padding-top: @y;}
.f-padding-right-bottom(@x: @normal-space, @y: @normal-space) {padding-right: @x; padding-bottom: @y;}

.f-border-radius() {border-radius: @normal-space;}

.f-box-shadow() {box-shadow: @box-shadow}
.f-app-circle {border-radius: @half;}
.f-app-content() {margin-bottom: 1.3rem;}
.f-app-font-gray() {color: @font-gray;}
.f-app-break-text(@x: 3) {
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: @x;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.f-flex-wrap {display: flex; display: -webkit-flex;}
.f-flex-end {display: flex-end;}
.f-flex-1 {flex: 1;}
.f-flex-2 {flex: 2;}
.f-flex-3 {flex: 3;}
.f-flex-4 {flex: 4;}
.f-flex-5 {flex: 5;}
.f-flex-6 {flex: 6;}
.f-flex-7 {flex: 7;}
.f-flex-8 {flex: 8;}
.f-flex-9 {flex: 9;}

* {
    margin: 0;
    padding: 0;
}
fieldset, img, button, input {
    border: none;
    outline-style: none;
}
ul, ol, dl {
    list-style: none;
}
input[required]:invalid, input:focus:invalid, textarea[required]:invalid, textarea:focus:invalid {
    box-shadow: none;
}

i {
    font-style: normal;
}

img {
    vertical-align: top;
}

select, input {
    vertical-align: middle;
}

select, input, textarea {
    margin: 0;
}

textarea {
    resize: none;
}

table {
    border-collapse: collapse;
}

em {
    font-style: normal;
}

s, del {
    text-decoration: none;
}

html a ,html a:visited{
    outline: 0;
    list-style: none;
    color:#000;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

body {
    font-family: "PingFang SC","微软雅黑", "Microsoft Yahei";
}

html, body, div, ul, li, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, button, textarea, select, input, span {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-family:  "PingFang SC","微软雅黑", "Microsoft Yahei", "STHeitiSC-Light", "Helvetica Neue", "Helvetica";
}

ul, ol, ul li, ol li {
    list-style: none;
}
a:hover {
    text-decoration: none;
}

textarea {
    outline: none;
    resize: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html body {
    background-color: #EFEFF4 !important;
}
html {
    height:100%;
    background-color: #EFEFF4 !important;
}

i {
    font-style: normal;
}

input::-ms-clear, ::-ms-reveal {
    display: none;
}
.fl{
    float:left;
}
.fr{
    float:right;
}
ul:after{
    content:"";
    display:table;
    clear:both;
}
.midCenter{
    -webkit-box-pack: center;
    box-pack: center;
    -webkit-box-align: center;
    box-align: center;
    box-pack: center;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center
}
.mid{
    -webkit-box-pack: center;
    box-pack: center;
    -webkit-box-align: center;
    box-align: center;
    display: -webkit-box;
}
.justify{
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.collection-box{
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,.3);
    z-index: 9999;
}
.collection-btn{
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding:0 0.3rem;
}
.collection-btn div{
    width:100%;
    height:1.1rem;
    line-height:1.1rem;
    font-size:16px;
    background:#fff;
    border-radius: 5px;
    margin-bottom: 0.222222226rem;
    text-align: center;
}
.collection-btn .collection{
    color:#f00;
}
.collection-btn .cancel{
    color:#000;
}

.position-center p{
    text-align: center;
    margin-top:30%;
    font-size:16px;
}

.nothing-count{
    padding:0 0.3rem 0;
    margin-top:50%;
    font-size:18px;
    text-align: center;
  }
